<template>
  <div class="app-container">
    <!--    <p class="warn-content">-->
    <!--      Markdown 基于-->
    <!--      <el-link type="primary" href="https://github.com/hinesboy/mavonEditor" target="_blank">MavonEditor</el-link>-->
    <!--    </p>-->
    <mavon-editor ref="md" v-model="mavonMessages" :style="'height:'+ height" @imgAdd="imgAdd" @save="save" />
  </div>
</template>

<script>
import { upload } from '@/utils/upload'
import { mapGetters } from 'vuex'
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import markdowmFile from '@/api/system/markdowmFile'

export default {
  name: 'Markdown',
  components: {
    mavonEditor
  },
  props: ['mavonMessage', 'mavonID'],
  data() {
    return {
      height: document.documentElement.clientHeight * 0.5 + 'px',
      mavonMessages: this.mavonMessage,
      mavonIDs: this.mavonID
    }
  },
  computed: {
    ...mapGetters([
      'imagesUploadApi',
      'baseApi'
    ])
  },
  mounted() {
    const that = this
    window.onresize = function temp() {
      that.height = document.documentElement.clientHeight * 0.5 + 'px'
    }
  },
  methods: {
    imgAdd(pos, $file) {
      upload(this.imagesUploadApi, $file).then(res => {
        const data = res.data
        const url = this.baseApi + '/file/' + data.type + '/' + data.realName
        this.$refs.md.$img2Url(pos, url)
      })
    },
    save(value, render) {
      var data = {}
      data.value = value
      data.htmlvalue = render
      if (this.mavonIDs === null) {
        markdowmFile.add(data).then(() => {
          this.$message({
            message: '保存成功',
            type: 'success',
            duration: 5 * 1000
          })
        })
      } else {
        data.id = this.mavonIDs
        markdowmFile.edit(data).then(() => {
          this.$message({
            message: '保存成功',
            type: 'success',
            duration: 5 * 1000
          })
        })
      }
    }
  }
}
</script>

<style scoped>
  .v-note-wrapper.shadow {
    z-index: 5;
  }
</style>
